import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import WarehouseIcon from "@mui/icons-material/Warehouse";
import Lineup from "./components/Lineup";
import ShowHero from "./components/ShowHero";

import "./index.scss";

const Pk = () => {
  const [isPk, setIsPk] = useState(false);
  const [open, setOpen] = React.useState(false);

  const [openHero, setopenHero] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setopenHero(false);
  };

  const showHeroFunc = (e:any)=>{
    e.stopPropagation(); //阻止原生事件冒泡
    e.nativeEvent.stopImmediatePropagation();
    setopenHero(true);
  }

  /**
   * 对战开始
   */
  const gotoPk = () => {
    setIsPk(true);
  };

  /**
   * 取消开始
   */
  const cancelPk = () => {
    setIsPk(false);
  };

  const navigate = useNavigate();
  /**
   * 跳转页面
   * @param url
   */
  function gotoPage(url: string) {
    navigate(url);
  }

  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 40; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: "暴力家族",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  return (
    <>
      <div className="pk-container">
        <div className="pk-inner-box">
          <div className="top-bar">
            <div className="btn war-record">我的战绩</div>
            <div
              className="waiting-time"
              style={{ display: isPk ? "block" : "none" }}
            >
              预计等待：00:10
            </div>
            <div className="btn game-introduce">游戏介绍</div>
          </div>
          {/* 对战人 */}
          <div className={isPk ? "battle-show pk-now" : "battle-show"}>
            {/* 我方 */}
            <div className="we">
              <div
                className="grade-box"
                onClick={() => {
                  gotoPage("/pk/reward");
                }}
              >
                <img className="img-icon" src="/images/grade_1.png" />
                <span className="grade">青铜I</span>
                <span className="exp">(230/300)</span>
              </div>
              <div className="game-player">
                <div className="player-photo">
                  <img className="img-icon" src="/images/user_photo.png" />
                </div>
                <div className="name">艾琳娜</div>
              </div>
            </div>
            {/* PK图标 */}
            {isPk ? (
              <>
                <div className="pk-icon">
                  <div className="passed-time">00:04</div>
                  <img className="img-icon" src="/images/pk_big_icon.png" />
                  <button
                    className="cancel-match-btn"
                    onClick={() => {
                      cancelPk();
                    }}
                  >
                    取消匹配
                  </button>
                </div>
                {/* 敌方 */}
                <div className="enemy">
                  <div className="grade-box">
                    {/* <img className="img-icon" src="/images/grade_1.png" />
                  <span className="grade">青铜I</span>
                  <span className="exp">(230/300)</span> */}
                  </div>
                  <div className="game-player">
                    <div className="player-photo">
                      <span className="word">等待中...</span>
                      {/* <img className="img-icon" src="/images/user_photo.png" /> */}
                    </div>
                    <div className="name"></div>
                  </div>
                </div>
              </>
            ) : null}
          </div>
          {/* 按钮 */}
          <div className="battle-btns">
            <div
              className={isPk ? "btn pking" : "btn"}
              onClick={() => {
                gotoPk();
              }}
            >
              对战
            </div>
            <div
              className="btn"
              onClick={() => {
                gotoPage("/pk/room");
              }}
            >
              <img src="/images/pk_flag.png" />
              <span className="name">PK赛</span>
            </div>
          </div>
          {/* 列表 */}
          <div className="group-list-box">
            <div className="hd">
              <span className="name">战斗阵容</span>
              <WarehouseIcon />
            </div>
            <div className="list-box">
              <ul>
                {listData.map((item: any) => (
                  <li key={item.id} className="item">
                    <div
                      className={item.id == 1 ? "item-box select" : "item-box"}
                      onClick={() => {
                        handleClickOpen();
                      }}
                    >
                      <div className="select-flag">出战</div>
                      <div className="group-box">
                        <div className="name-box">
                          <span className="name">{item.name}</span>
                          <span className="prop">
                            <img src="/images/porp_1.png" alt="" />
                            <img src="/images/porp_2.png" alt="" />
                          </span>
                        </div>
                        <div className="list-min-box">
                          <ul>
                            <li onClick={(e)=>{ showHeroFunc(e);}}>
                              <img src="./images/dinosaur1.png" alt="" />
                            </li>
                            <li className="add-box"></li>
                            <li className="add-box"></li>
                            <li className="add-box"></li>
                          </ul>
                        </div>
                      </div>
                      <div className="current-skill">
                        <div className="name">火球爆术</div>
                        <div className="skill-icon">
                          <img src="/images/skill_icon.png" />
                        </div>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
      {/* 选择阵容 */}
      <Lineup open={open} onClose={handleClose} />

      <ShowHero open={openHero} onClose={handleClose} />
    </>
  );
};
export default Pk;
